<template>
  <el-dialog v-el-drag-dialog="{ drag: true, full: false, resize: false }" :visible="true" :close-on-click-modal="false"
    @close="closeMd" :title="`${obj ? '修改' : '添加'}导入订单`" width="800px" custom-class="adup-import-team-order"
    :append-to-body="true">
    <el-form v-if="obj" :ref="fm.fname" :model="fm.ps" @keyup.enter.native="onSubmit" :label-width="'100px'">
      <el-row>
        <el-col :span="12">
          <el-form-item label="团号" prop="travelNum">
            <el-input v-model="fm.ps.travelNum" maxlength="20" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="组团社" prop="travelUnit">
            <el-input v-model="fm.ps.travelUnit" maxlength="20" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户姓名" prop="passengersInfo">
            <el-input v-model="fm.ps.passengersInfo" maxlength="20" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="客户电话" prop="cusPhone" :rules="[
            { required: true, message: '客户电话不能为空' },
            this.$rules.isPhone('客户电话格式不正确')
          ]">
            <el-input v-model="fm.ps.cusPhone" maxlength="11" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <!-- <el-form-item 
          label="用车单位" 
          prop="cusUname" 
          required
          :rules="[{required: true, message: '用车单位不能为空', trigger: 'change'}]">
          <el-select 
            v-model="fm.ps.cusUname" 
            clearable filterable 
            :remote="true"
            :remote-method="queryCusPageList"
            :placeholder="'请搜索选择用车单位'"
            style="width: 100%">
            <el-option
                v-for="it in clientList"
                :key="it.baseUserId.uname"
                :label="it.baseUserId.realName+'【' +it.baseUserId.phone+ '】【'+ it.unitName +'】'"
                :value="it.baseUserId.uname">
                <span>{{ it.baseUserId.realName }}</span>
                <span>{{ '【' +it.baseUserId.phone+ '】【'+ it.unitName +'】' }}</span>
            </el-option>
          </el-select>
        </el-form-item> -->
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客源" prop="cusResource">
            <el-input v-model="fm.ps.cusResource" maxlength="20" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="人数" prop="customers" :rules="[
            { required: true, message: '人数不能为空' },
            this.$rules.isPosInt('人数格式不正确')
          ]">
            <el-input v-model="fm.ps.customers" maxlength="6" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="车型" prop="carSeats" :rules="[
            { required: true, message: '车型不能为空' },
            this.$rules.isPosInt('车型格式不正确')
          ]">
            <el-input v-model="fm.ps.carSeats" maxlength="6" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="行程简称" prop="shuttleType" :rules="[
            { required: true, message: '行程简称不能为空' }
          ]">
            <!-- <el-input 
              v-model="fm.ps.shuttleType"
              maxlength="20"
              clearable>
            </el-input> -->

            <el-select v-model="fm.ps.shuttleType" placeholder="请选择行程简称" style="width: 100%">
              <el-option v-for="it in shuttleTypeArr" :key="it.id" :label="it.name" :value="it.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="站点" prop="stationId" :rules="[{ required: true, message: '站点不能为空', trigger: 'change' }]">
            <el-select v-model="fm.ps.stationId" placeholder="请选择站点" style="width: 100%">
              <el-option v-for="it in stationArr" :key="it.id" :label="it.name" :value="it.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="接送日期" prop="travelDate" :rules="[
            { required: true, message: '接送日期不能为空' }
          ]">
            <el-date-picker v-model="fm.ps.travelDate" type="date" placeholder="选择接送日期" clearable style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="接送时间" prop="travelTime" :rules="[
            { required: true, message: '接送时间不能为空' }
          ]">
            <el-time-select v-model="fm.ps.travelTime" placeholder="选择接送时间" clearable value-format="HH:mm" format="HH:mm"
              :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '23:45'
              }" style="width: 100%">
            </el-time-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="接送酒店" prop="travelHotel" :rules="[{ required: true, message: '接送酒店不能为空' }]">
            <el-input v-model="fm.ps.travelHotel" maxlength="20">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="航班车次" prop="travelWayNum">
            <el-input v-model="obj.travelWayNum" maxlength="15">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="价格" prop="price" :rules="[
            { required: true, message: '价格不能为空' },
            this.$rules.isFloat('价格格式错误')
          ]">
            <el-input v-model="fm.ps.price" maxlength="8" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="夜班费" prop="nightPrice">
            <el-input v-model="fm.ps.nightPrice" maxlength="8" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="接送备注" prop="travelNote">
            <el-input v-model="fm.ps.travelNote" placeholder="请填写接送备注" type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }" maxlength="200" show-word-limit resize="none">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button v-if="obj" type="success" icon="el-icon-refresh-right" @click="resetForm">
        重 置
      </el-button>

      <el-button type="primary" :icon="obj ? 'el-icon-edit' : 'el-icon-plus'" @click="onSubmit" :loading="fm.sb.load">
        {{ obj ? '修 改' : '添 加' }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';

import * as commonSer from '@/api/services/common.service';
import * as orderSer from '@/api/services/order.service';

export default {
  name: 'AdupImportTeamOrder',
  directives: { elDragDialog },
  props: { myData: Object },
  data() {
    return {
      // 修改对象数据
      obj: this.myData.obj,

      fm: {// 表单数据对象
        fname: "adupImportTeamOrderFm",
        sb: { load: false },
        ps: {
          // 导入订单id
          orderId: null,
          // 团号
          travelNum: null,
          // 组团社
          travelUnit: null,
          // 客户姓名
          passengersInfo: null,
          // 客户电话
          cusPhone: null,
          // 客源
          cusResource: null,
          // 人数
          customers: null,
          // 车型
          carSeats: null,
          // 行程简称
          shuttleType: null,
          // 接送站点
          stationId: null,
          // 接送日期
          travelDate: null,
          // 出发时间
          travelTime: null,
          // 接送酒店
          travelHotel: null,
          // 航班车次
          travelWayNum: null,
          // 价格
          price: null,
          // 夜班费
          nightPrice: null,
          // 接送备注
          travelNote: null,
        },
      },

      // 站点数组
      stationArr: [],

      // 行程简称
      shuttleTypeArr: [
        { id: '接东站', name: '接东站' },
        { id: '送东站', name: '送东站' },
        { id: '接西站', name: '接西站' },
        { id: '送西站', name: '送西站' },
        { id: '接南站', name: '接南站' },
        { id: '送南站', name: '送南站' },
        { id: '接北站', name: '接北站' },
        { id: '送北站', name: '送北站' },
      ],

      // 客户数据列表
      clientList: [],

    }
  },
  async created() {
    const that = this;

    // 获取-站点列表
    let staRes = await commonSer.getStationList({ type: that.obj.type });
    if (staRes.code == 1) that.stationArr = staRes.data;
    console.log('站点列表', staRes);

    // 设置表单默认数据
    that.setInitData();
  },
  methods: {
    closeMd() {
      this.$emit("myClick", { state: false });
    },
    /**
     * 获取-单位客户列表（用于下拉框）
     * @param find 客户手机号/用户名
     */
    queryCusPageList(find) {
      const that = this;

      commService.queryComboCusPageList({ page: 1, rows: 20, find: find }).then(res => {
        if (res && res.code == 1) that.clientList = res.data;
      });
    },
    // 设置初始化数据
    setInitData() {
      const that = this;

      // 设置-修改回填
      if (that.obj) {
        let o = that.obj;
        console.log('修改对象', o);
        let ps = {
          ...o,
          orderId: o.id
        };
        that.fm.ps = ps;
      }
    },
    // 重置表单
    resetForm() {
      this.$refs[this.fm.fname].resetFields();
      this.setInitData();
    },
    // 提交表单
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);
      console.log('提交参数', ps);
      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          let fg = true;
          // 验证
          if (fg) {
            if (!ps.orderId) {
              fg = U.qerrorFalse('[修改订单id]为空，请重新选择订单');
            }
          }

          if (fg) {
            if (!ps.stationId && !ps.wayNum) {
              fg = U.qerrorFalse('请至少操作一项');
            } else if (ps.stationId && ps.wayNum) {
              fg = U.qerrorFalse('两项任选其一');
            } else if (ps.stationId) {
              ps.stationId = ps.stationId.id;
            }
          }

          if (fg) {
            sb.load = true;
            orderSer.adupImportTeamOrder(ps).then((res) => {
              sb.load = false;

              if (res.code != 1) {
                U.qerror(res.msg);
              } else {
                U.qsuccess(res.msg);

                // 关闭弹框
                that.closeMd();

                // 调用父组件方法-重新加载数据
                that.$emit("reloadDg");
              }
            });

            setTimeout(() => { sb.load = false; }, 10000);
          }
        }
      });
    },

  },
}
</script>
